<template>
  <view>
    <!--顶部图标栏开始 -->
    <view>
      <view class="cu-list grid gridBorder:no-border col-4">
        <view class="cu-item">
          <navigator :url="`/pages/classDetail/monthStar/index?id=${classes.id}`">
            <view class="cuIcon-favorfill text-orange">
              <view class="cu-tag badge">5</view>
            </view>
            <text>班级用户</text>
          </navigator>
        </view>


        <view class="cu-item" @tap="ClickScoreboard">
          <navigator :url="`/pages/classDetail/scoreBoard/index?id=${classes.id}`" class="cuIcon-upstagefill text-cyan">
            <view class="cu-tag badge">10</view>
          </navigator>
          <text>积分榜</text>
        </view>
      </view>
    </view>
    <!--顶部图标栏结束 -->

    <!-- 简介 -->
    <view class="class_detail">
      <view class="class_title">班级信息</view>
      <view class="class_name">* {{classes.name}}</view>
      <view class="class_desc">## {{classes.desc}}</view>
    </view>
    <!-- 简介结束 -->

    <!-- 题目 -->
    <view class="class_group">
      <view class="group_title">班级考试</view>
      <view class="group_item" v-for="(item,index) in classes.groupList" :key="index">
        <uni-card
          @click="handleToGroup(item.id)"
          :title="item.title"
          :extra="item.totalScore"
          :note="item.time"
        >{{item.content}}</uni-card>
      </view>
    </view>

    <!-- 相关课程 -->
    <view class="class_cour">
      <view class="class_rel">相关课程</view>
      <course-list :item="classes.courses" :index="1"></course-list>
    </view>
    <!-- 相关课程结束 -->

    <!--班级开始 -->

    <!-- 班级结束-->
  </view>
</template>

<script>
import courseList from "../../component/courseList.vue";
import { uniCard } from "@dcloudio/uni-ui";
export default {
  components: {
    courseList,
    uniCard
  },
  data() {
    return {
      id: 0,
      classes: {},
      list: {}
    };
  },
  onBackPress() {
    if (this.$refs.fab.isShow) {
      this.$refs.fab.close();
      return true;
    }
    return false;
  },
  onLoad(option) {
    console.log(option);
    //this.id = option.id;
    this.id = 2;
    this.getClass();
  },
  methods: {
    handleToGroup(id) {
      uni.redirectTo({
        url: `/pages/question/index?id=${id}`
      });
    },
    getClass() {
      this.request({
        url: this.apiServer + "/class/findClassById?id=" + this.id
      }).then(res => {
        console.log(res);
        for (var i = 0; i < res.data.groupList.length; i++) {
          res.data.groupList[i].totalScore =
            "满分为" + res.data.groupList[i].total + "分";
          res.data.groupList[i].time =
            "计时" + res.data.groupList[i].limitTime / 60 + "分钟";
        }
        this.classes = res.data;
      });
    },
    ClickMonthstar: function() {
      uni.navigateTo({
        url: "./monthStar/index",
        success: res => {},
        fail: () => {
          console.log(假的);
        },
        complete: () => {}
      });
    },

    ClickScoreboard() {
      uni.navigateTo({
        url: "./scoreBoard/index",
        success: res => {},
        fail: () => {
          console.log(假的);
        },
        complete: () => {}
      });
    },
    triggerCollapse() {
      this.list.open = !this.list.open;
    },
    goDetailPage(e) {
      //let url =  '/pages/courseDetail/index?course_id=' + e;
      let url = "/pages/divideClass/index?cid=" + e;
      uni.navigateTo({
        url: url,
        success: res => {},
        fail: () => {
          console.log(假的);
        },
        complete: () => {}
      });
    },
    showCourses() {
      // console.log("点击了"+e)
      this.list.courses.isShow = !this.list.courses.isShow;
    }
  }
};
</script>

<style lang="scss" scoped>
.class_detail {
  padding: 10rpx;
  .class_title {
    border-left: solid $color-theme 10rpx;
    padding-left: 30rpx;
    font-size: 36rpx;
    font-weight: 600;
  }
  .class_name {
    padding: 5rpx;
    flex-wrap: wrap;
    font-size: 38rpx;
    font-weight: 600;
    color: #000000;
  }
  .class_desc {
    padding-top: 5rpx;
    color: #ccc;
  }
}

.class_group {
  padding: 10rpx;
  .group_title {
    border-left: solid $color-theme 10rpx;
    padding-left: 30rpx;
    font-size: 36rpx;
    font-weight: 600;
  }
  .group_item {
  }
}
.class_cour {
  padding: 10rpx;
  .class_rel {
    padding: 5rpx;
    border-left: solid $color-theme 10rpx;
    padding-left: 30rpx;
    font-size: 36rpx;
    font-weight: 600;
  }
}

.uni-panel {
  margin-bottom: 12px;
}
.uni-icon {
  font-family: uniicons;
  font-weight: normal;
}
.uni-panel-h {
  background-color: #ffffff;
  flex-direction: row;
  align-items: center;
  padding: 12px;
}
/*
.uni-panel-h:active {
    background-color: #f8f8f8;
}
 */
.uni-panel-h-on {
  background-color: #f0f0f0;
}

.uni-panel-text {
  flex: 1;
  color: #000000;
  font-size: 14px;
  font-weight: normal;
}

.uni-panel-icon {
  margin-left: 15px;
  color: #999999;
  font-size: 14px;
  font-weight: normal;
  transform: rotate(0deg);
  transition-duration: 0s;
  transition-property: transform;
}

.uni-panel-icon-on {
  transform: rotate(180deg);
}

.uni-navigate-item {
  flex-direction: row;
  align-items: center;
  background-color: #ffffff;
  border-top-style: solid;
  border-top-color: #f0f0f0;
  border-top-width: 1px;
  padding: 12px;
}

.uni-navigate-item:active {
  background-color: #f8f8f8;
}

.uni-navigate-text {
  flex: 1;
  color: #000000;
  font-size: 14px;
  font-weight: normal;
}

.uni-navigate-icon {
  margin-left: 15px;
  color: #999999;
  font-size: 14px;
  font-weight: normal;
}
</style>
